<script setup>
import {ref} from 'vue'
import tongguo1 from './tongguo1.vue'
import shengqizhong from './shenqizhong.vue'
import jujue1 from './jujue1.vue'
import jujue02 from './../shenqingyanqi/jujue02.vue'
import shenhezhong0 from '../shenqingyanqi/shenhezhong0.vue'
import tongguo01 from '../shenqingyanqi/tongguo01.vue'

let time = ref(0);

const timeStop = setInterval(() => {
  time.value = time.value + 1;
  console.log(time.value);
  if (time.value == 30) {
    clearInterval(timeStop)
  }
}, 1000)
</script>

<template>
  <view v-if="time < 5 && time >= 0">
    <shengqizhong></shengqizhong>
  </view>
  <view v-if="time < 10 && time >= 5">
    <tongguo1></tongguo1>
  </view>
  <view v-if="time < 15 && time >= 10">
    <jujue1></jujue1>
  </view>
  <view v-if="time < 20 && time >= 15">
    <shenhezhong0></shenhezhong0>
  </view>
  <view v-if="time < 25 && time >= 20">
    <tongguo01></tongguo01>
  </view>
  <view v-if="time <= 30 && time >= 25">
    <jujue02></jujue02>
  </view>
</template>

<style scoped>
#background {
  display: flex;
  justify-content: center;
}
</style>